<template>
  <view class="container">
    <block  v-for="(item,index) in errorData" :key="index">
      <view class="error" v-if="item.type == 'network'">
        <view class="error-text">{{item.content}}</view>
        <image :src="item.imgUrl" mode="widthFix" class="error-icon"></image>
        <view @click="process" class="error-btn">{{item.btnText}}</view>
      </view>
    </block>
  </view>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                errorData:[
                    {
                        type:'network',
                        content:'网络不给力，请再试一次',
                        imgUrl:'/static/img/error-icon.png',
                        btnText:'重新加载'
                    }
                ]
            }
        },
        methods:{
          process(){
            this.$emit('process')
          }
        }
    }
</script>

<style scoped lang="less">
.error {
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  text-align: center;
  position: absolute;
  bottom: 0;
  top: 0;

  &-text {
    font-size: 28upx;
    color: #9999;
    padding-top: 240upx;
  }
  &-icon {
    width: 145upx;
    margin-top: 60upx;
  }
  &-btn {
    width: 320upx;
    height: 80upx;
    line-height: 80upx;
    color: #fff;
    font-size: 28upx;
    background-color: #5ea1f8;
    border-radius: 8upx;
    margin: 80upx auto 0;
  }
}
</style>